<template>
  <div class="custom-titlebar">
    <img class="icon_logo" src="@/assets/img/icon/start.svg" alt="" />
    <span>mysql工具箱</span>
  </div>
  <div class="main">3435</div>
  <!-- <el-container>
    <el-header>
      <el-row class="header_row">
        <el-col class="icon_logo" :span="16">
          <img src="@/assets/img/icon/start.svg" alt="icon_logo" />
          <div>mysql工具箱</div>
        </el-col>
        <el-col :span="8">
          <div class="windows_icon">
            <div @click="minimizeWindows"><i class="iconfont icon-shouqichuangkou"></i></div>
            <div @click="maximizeWindows"><i class="iconfont icon-chuangkou"></i></div>
            <div @click="clonsWindows"><i class="iconfont icon-guanbichuangkou"></i></div>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main> </el-main>
  </el-container> -->
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'

const electron = reactive({ ...window.electron })

const clonsWindows = () => {
  electron.ipcRenderer.invoke('clons')
}

const maximizeWindows = () => {
  electron.ipcRenderer.invoke('maximize')
}

const minimizeWindows = () => {
  electron.ipcRenderer.invoke('minimize')
}

onMounted(() => {
  ;(async () => {
    if (window.electron.process.platform === 'linux') {
      document?.querySelector('.custom-titlebar')?.classList.add('linux')
    }
  })()
  ;(async () => {
    // MacOS 上红绿灯默认在标题栏左侧，因此需要将窗口标题文字让开以避免遮挡，这里设为居中。
    // 需要注意这里使用了 electron-vite 框架，如果你没有使用该框架，可在 Node 后端将 process.platform 传递给前端进行判断。
    // 'darwin' 代表 MacOS
    if (window.electron.process.platform === 'darwin') {
      document.querySelector('.custom-titlebar')?.classList.add('darwin')
    }
  })()
})
</script>

<style scoped>
.custom-titlebar {
  /* ... 省略其他样式 */
  /* 避免选中窗口标题 */
  user-select: none;
  /* 设置该属性表明这是可拖拽区域，用来移动窗口 */
  -webkit-app-region: drag;
  background-color: #1f2430;
  border-bottom: 1px solid rgb(25, 30, 42);
}
.icon_logo {
  width: 28px;
  height: 28px;
  margin-right: 4px;
}
.el-header {
  height: 44px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--el-border-color);
}
.header_row {
  height: 100%;
}
.icon_logo {
  height: 100%;
  display: flex;
  align-items: center;
}

.icon_logo img {
  width: 28px;
  height: 28px;
  margin: 0 4px;
}
.windows_icon {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.windows_icon > div {
  width: 48px;
  /* margin-left: 4px; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.windows_icon > div:hover {
  background-color: #dcdcdc;
}
</style>
